<template>
    <div>
        <el-card class="box-card">
            <div slot="header" class="clearfix">
        <span style="position: relative; top: 10px">
          <i class="el-icon-search"></i>
          搜索
        </span>
                <el-button-group style="float: right; padding: 3px 0">
                    <el-button
                            size="small"
                            type="primary"
                            icon="el-icon-search"
                            @click="btnSearch"
                    >搜索</el-button
                    >
                    <el-button
                            size="small"
                            icon="el-icon-refresh"
                            type="primary"
                            @click="btnReset"
                    >重置</el-button
                    >
                </el-button-group>
            </div>
            <el-form :model="searchForm" :inline="true" ref="feedbackFormRef">
                <el-row>
                    <el-col :span="colSize">
                        <el-form-item label="状态" prop="status">
                            <el-select
                                    v-model="searchForm.status"
                                    filterable
                                    placeholder="请选择"
                            >
                                <el-option
                                        v-for="item in statusList"
                                        :key="item.id"
                                        :label="item.name"
                                        :value="item.value"
                                >
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </el-card>
        <el-card class="data-card">
            <div slot="header" class="clearfix">
        <span style="position: relative; top: 7px">
          <i class="el-icon-tickets"></i>
          反馈列表
        </span>
                <div style="float: right; padding: 3px 0">
                    <!--          <el-button-->
                    <!--            size="small"-->
                    <!--            type="warning"-->
                    <!--            icon="el-icon-plus"-->
                    <!--            @click="btnAdd"-->
                    <!--            >添加</el-button-->
                    <!--          >-->
                    <!--          <el-button-->
                    <!--            size="small"-->
                    <!--            type="danger"-->
                    <!--            icon="el-icon-delete"-->
                    <!--            @click="btnDelete"-->
                    <!--            >批量删除</el-button-->
                    <!--          >-->
                </div>
            </div>
            <el-table fit :data="feedbackList" stripe style="width: 100%">
                <el-table-column align="center" type="selection" width="55">
                </el-table-column>
                <el-table-column align="center" prop="id" label="编号">
                </el-table-column>
                <el-table-column align="center" label="用户编号" prop="userId">
                </el-table-column>
                <el-table-column align="center" label="联系方式" prop="contact">
                </el-table-column>
                <el-table-column align="center" label="内容" prop="text">
                </el-table-column>
                <el-table-column align="center" label="反馈时间" prop="createTime" :formatter="dateFormat">
                </el-table-column>
                <el-table-column align="center" label="状态" prop="status">
                    <template slot-scope="scope">
                        <p>{{scope.row.status | statusFilter}}</p>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="操作">
                    <template slot-scope="scope">
                        <p>
                            <el-button
                                    v-if="scope.row.status=='NEW'"
                                    size="mini"
                                    icon="el-icon-truck"
                                    type="success"
                                    @click="btnUpdateStatus(scope.row)"
                            >解决</el-button
                            >
                        </p>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                    background
                    style="margin-top: 20px"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="page.pageNum"
                    :page-sizes="[10, 20, 30]"
                    :page-size="page.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="page.total"
            >
            </el-pagination>
        </el-card>
    </div>
</template>

<script>
    import {api_feedbackList, api_updateFeedbackStatus} from "../../api/feedback";

    export default {
        data() {
            return {
                colSize: 6,
                feedbackList: [],
                statusList:[
                    {
                        id:1,
                        name:'待解决',
                        value:'NEW'
                    },
                    {
                        id:2,
                        name:'已解决',
                        value:'NEW'
                    }
                ],
                searchForm: {
                    pageNum: 1,
                    pageSize: 10,
                    status: null,
                },
                page: {
                    pageNum: 1,
                    pageSize: 10,
                    totalPage: 3,
                    total: 11,
                },
            }
        },
        created() {
            this.btnSearch()
        },
        filters: {
            statusFilter(value) {
                //待解决 已解决
                let text = ''
                switch(value){
                    case 'NEW':
                        text = '待解决';
                        break;
                    case 'FINISH':
                        text = '已解决';
                        break;
                    default:
                        break;
                }
                return text
            },
        },
        methods: {
            dateFormat(row, column, cellValue) {
                if(cellValue==null || cellValue=="") return "";
                let date = new Date(cellValue);
                let Y = date.getFullYear() + '-';
                let M = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) + '-' : date.getMonth() + 1 + '-';
                let D = date.getDate() < 10 ? '0' + date.getDate() + ' ' : date.getDate() + ' ';
                let h = date.getHours() < 10 ? '0' + date.getHours() + ':' : date.getHours() + ':';
                let m = date.getMinutes()  < 10 ? '0' + date.getMinutes() + ':' : date.getMinutes() + ':';
                let s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
                return Y + M + D + h + m + s ;
            },
            btnSearch() {
                this.handleFeedbackList()
            },
            btnReset() {
                this.$refs.feedbackFormRef.resetFields()
            },
            async btnUpdateStatus(row){
                let status = "FINISH"
                let ids = []
                ids.push(row.id)
                const param = {
                    ids: JSON.stringify(ids),
                    status: status,
                }
                const { data: res } = await api_updateFeedbackStatus(param)
                if (!res.success) {
                    return this.$message.error(res.msg)
                }
                this.btnSearch()
                this.$message({
                    message: res.msg,
                    type: 'success',
                })
            },
            handleSizeChange(val) {
                this.searchForm.pageSize = val
                this.btnSearch()
            },
            handleCurrentChange(val) {
                this.searchForm.pageNum = val
                this.btnSearch()
            },
            //获取订单列表
            async handleFeedbackList() {
                const param = {
                    page: this.searchForm.pageNum,
                    limit: this.searchForm.pageSize,
                    bean: JSON.stringify(this.searchForm),
                }
                const { data: res } = await api_feedbackList(param)
                this.feedbackList = res.data.list
                this.page.total = res.data.total
            },
        },
    }
</script>

<style scoped>
    .clearfix:before,
    .clearfix:after {
        display: table;
        content: '';
    }
    .clearfix:after {
        clear: both;
    }
    .box-card {
        width: 100%;
        margin: auto;
    }
    .data-card {
        margin-top: 10px;
    }

    .el-date-picker {
        float: left;
    }
</style>
